<template>
  <div class="todo-container">
    <h1>Todo List</h1>
    <div class="input-group">
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加一个新的任务..." />
      <button @click="addTodo">添加</button>
    </div>
    <ul class="todo-list">
      <li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }">
        <input type="checkbox" v-model="todo.completed" />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.todo-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(27, 31, 35, 0.12), 0 8px 24px rgba(27, 31, 35, 0.12);
}

h1 {
  font-size: 24px;
  color: #c9d1d9;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  background-color: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-size: 16px;
  color: #c9d1d9;
}

input[type="text"]::placeholder {
  color: #8b949e;
}

button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #238636;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #2ea043;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #30363d;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #8b949e;
}

.todo-list li input[type="checkbox"] {
  margin-right: 10px;
}

.todo-list li button {
  margin-left: auto;
  background-color: #d73a49;
}

.todo-list li button:hover {
  background-color: #cb2431;
}
</style>
